<script setup lang="ts">
import { ref } from 'vue'
const newsList = ref([
  {
    title: '三诺生物荣获2024年度医疗创新大奖',
    date: '2024-03-15',
    category: '企业新闻',
    thumbnail: '/images/news1.jpg'
  },
  // 更多新闻...
])
</script>

<template>
  <div class="news-container">
    <h2 class="section-title">新闻动态</h2>
    
    <div class="news-grid">
      <article 
        v-for="(news, index) in newsList"
        :key="index"
        class="news-card"
      >
        <img 
          :src="news.thumbnail" 
          :alt="news.title"
          class="news-thumbnail"
        >
        <div class="news-content">
          <span class="news-category">{{ news.category }}</span>
          <h3>{{ news.title }}</h3>
          <time class="news-date">{{ news.date }}</time>
        </div>
      </article>
    </div>
  </div>
</template>

<style scoped lang="scss">
.news-container {
  padding: 6rem 5%;
  
  .section-title {
    text-align: center;
    color: $sansure-dark;
    margin-bottom: 3rem;
  }
  
  .news-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .news-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .news-thumbnail {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .news-content {
      padding: 1.5rem;
      
      .news-category {
        color: $sansure-blue;
        font-size: 0.9rem;
        font-weight: 500;
      }
      
      h3 {
        color: $sansure-dark;
        margin: 1rem 0;
        font-size: 1.1rem;
      }
      
      .news-date {
        color: #666;
        font-size: 0.9rem;
      }
    }
  }
}
</style>